<template>
	<!-- 未登录 -->
	<view v-if="!islogin">
		<view class="top_main">
			<view class="logintitle">用户登录</view>
			<view class="input"><input type="text" v-model="formdata.username" placeholder="登录名" /></view>
			<view class="input"><input type="password" v-model="formdata.password" placeholder="密码" /></view>
			<button class="loginbutton" @click="login">登录</button>
			<view class="" @click="toReg">注册</view>
		</view>
	</view>
	<!-- 登录成功后 -->
	<view v-else>
		<view class="main">
			<!-- 侧边栏（抽屉） -->
			<view class="bars" @click="showDrawer('drawer')">
				<uni-icons type="bars" size="30"></uni-icons>
				<uni-drawer ref="showRight" mode="right" :width="250">
					<scroll-view class="scroll" scroll-y="true">
						<view class="scroll_box">
							<view class="scroll_box_view" @click="toEditData">
								<view>编辑资料</view>
								<uni-icons class="icon_right" type="right"></uni-icons>
							</view>
							<hr class="hr" />
							<view class="scroll_box_view" @click="toSecurity">
								<view>账号与安全</view>
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
						<view class="scroll_box">
							<view class="scroll_box_view" @click="toAbout">
								<view>关于留言板</view>
								<uni-icons type="right"></uni-icons>
							</view>
							<hr class="hr" />
							<view class="scroll_box_view" @click="toVersions">
								<view>检查版本</view>
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
						<view class="scroll_box_logout" @click="logout">退出登录</view>
					</scroll-view>
				</uni-drawer>
			</view>
			<!-- 头像及用户名信息显示 -->
			<view class="top">
				<!-- 头像 -->
				<img :src="api.getUserLogo(userinfo.tbUser.uid)" class="avatar" />
				<!-- 用户名、关注及粉丝等信息 -->
				<view class="user">
					<!-- 用户名 -->
					<view class="nickname">
						<view v-if="!userinfo.tbUserInfo.nickname">暂未设置用户名</view>
						<view v-else>{{userinfo.tbUserInfo.nickname}}</view>
					</view>
					<!-- UID -->
					<view class="info">UID：{{userinfo.tbUser.uid}}</view>
					<!-- 性别、IP地址 -->
					<view class="user_flex">
						<view class="info">
							<view v-if="userinfo.tbUserInfo.sex=='m'">♂ 男</view>
							<view v-if="userinfo.tbUserInfo.sex=='f'">♀ 女</view>
							<view v-if="userinfo.tbUserInfo.sex=='n'">保密</view>
						</view>
						<view v-if="ipinfo.citycode">
							<view class="info">IP：{{ ipinfo.province }}{{ ipinfo.city }}{{ ipinfo.district }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 个性签名 -->
			<view class="signature">
				<view v-if="userinfo.tbUserInfo.info">{{userinfo.tbUserInfo.info}}</view>
				<view v-else>系统原装签名，给每一位小可爱~</view>
			</view>
			<!-- 关注和粉丝 -->
			<view class="attention">
				<view class="flex">
					<view class="followText" @click="toMineFollows">{{userinfo.exInfo.mineFollows}}</view>
					<view>关注</view>
				</view>
				<view class="flex">
					<view class="followText" @click="toFollowMines">{{userinfo.exInfo.followMines}}</view>
					<view>粉丝</view>
				</view>
			</view>
			<!-- 我的发帖信息显示 -->
			<view class="card-box" v-for="d in list">
				<view class="top_card">
					<img :src="api.getUserLogo(d.uid)" class="avatar_card" />
					<view style="margin-left: 8px;">
						<view style="font-size: 15px; font-weight: bold;">
							<view v-if="!userinfo.tbUserInfo.nickname">暂未设置用户名</view>
							<view>{{userinfo.tbUserInfo.nickname}}</view>
						</view>
						<view style="font-size: 10px;">{{tools.formatDate(d.lastupdate)}}</view>
					</view>
				</view>
				<!-- 标题 -->
				<view class="card-title" @click="showDetail(d)">{{d.title}}</view>
				<!-- 底部 -->
				<view class="footer">
					<!-- 点击量 -->
					<view>
						<uni-icons type="eye" size="15"></uni-icons>{{d.hits}}
					</view>
					<!-- 评论量 -->
					<view>
						<uni-icons type="fire" size="15"></uni-icons>{{d.reply}}
					</view>
					<!-- 点赞量 -->
					<view @click="praise(d)" class="praise" :class="{active:d.exInfo.praised}">
						<view v-if="!d.exInfo.praised"><uni-icons type="hand-up" size="15"></uni-icons></view>
						<view v-else><uni-icons color="#1890ff" type="hand-up" size="15"></uni-icons></view>
						{{d.praise}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import api from '../../script/api.js'
	import tools from '../../script/tools.js'

	// IP信息
	import ipstore from '../../store/ipinfo.js'
	const {
		ipinfo,
		weather
	} = storeToRefs(ipstore())

	// 抽屉
	const showRight = ref(false)
	const showDrawer = () => {
		showRight.value.open();
	}
	// 跳转编辑资料
	const toEditData = () => {
		uni.navigateTo({
			url: '/pages/my/drawer/editData'
		})
	}
	// 跳转账号与安全页面
	const toSecurity = () => {
		uni.navigateTo({
			url: '/pages/my/drawer/security'
		})
	}
	// 跳转关于留言板页面
	const toAbout = () => {
		uni.navigateTo({
			url: '/pages/my/drawer/about'
		})
	}
	// 跳转检查版本页面
	const toVersions = () => {
		uni.navigateTo({
			url: '/pages/my/drawer/versions'
		})
	}
	// 跳转关注页面
	const toMineFollows = () => {
		uni.navigateTo({
			url: '/pages/my/mineFollows/mineFollows'
		})
	}
	// 跳转粉丝页面
	const toFollowMines = () => {
		uni.navigateTo({
			url: '/pages/my/followMines/followMines'
		})
	}

	import {
		userinfoStore
	} from '../../store/index.js'
	import {
		storeToRefs
	} from 'pinia'

	const {
		updateUserInfo,
		queryUserInfo
	} = userinfoStore()
	const {
		islogin,
		userinfo,
	} = storeToRefs(userinfoStore())

	const formdata = ref({
		username: '',
		password: ''
	})
	// 登录
	const login = () => {
		api.post('/auth', formdata.value, (resp) => {
			console.log("登录信息", resp);
			if (resp.success) {
				uni.showToast({
					title: '登陆成功',
				})
				updateUserInfo(resp.success, resp.data)
			} else if (resp.code == 501) {
				uni.showToast({
					title: resp.message,
					icon: 'error',
				})
			}
			formdata.value.username = ''
			formdata.value.password = ''
		})
	}
	// 登出
	const logout = () => {
		updateUserInfo(false, {})
		api.delete('/auth', {}, (resp) => {
			uni.showToast({
				title: resp.message,
			})
		})
	}

	// 获取指定用户的发帖
	// const list = ref([])
	// const uid = ref(userinfo.value.tbUser.uid)
	// const page = ref({
	// 	pageSize: 10,
	// 	pageNumber: 1,
	// })
	// const order = ref(1)
	// const query = () => {
	// 	api.get(`/message/user/${uid.value}/${page.value.pageSize}/${page.value.pageNumber}/${order.value}`, {},
	// 		(resp) => {
	// 			if (resp.success) {
	// 				list.value = resp.data.data
	// 				page.value = resp.data.pageBean
	// 			}
	// 		})
	// }

	// 点赞留言板按钮
	const praise = (pinfo) => {
		api.post(`/message/praise/${pinfo.mid}`, {}, (resp) => {
			if (resp.success) {
				pinfo.exInfo.praised = !pinfo.exInfo.praised
				pinfo.praise = pinfo.exInfo.praised ? pinfo.praise + 1 : pinfo.praise - 1
			} else if (resp.code == 1000) {
				uni.showToast({
					title: "请先登录",
					icon: 'error',
				})
			}
		})
	}

	// 下拉刷新生命周期
	onPullDownRefresh(() => {
		queryUserInfo()
	})
</script>

<style lang="scss" scoped>
	.top_main {
		padding: 62rpx;
	}

	.logintitle {
		font-size: 48rpx;
		font-weight: 700;
		color: #1b2f29;
		margin-bottom: 200rpx;
	}

	.input {
		border-bottom: 0.5px solid #dcdcdc;
		margin-top: 30rpx;
		padding: 10px;

		&:hover {
			border-bottom: 0.5px solid #1890ff;
		}
	}

	.codeButton {
		font-size: 20rpx;
		color: #fff;
		background: #1890ff;
		border-radius: 3px;
		padding: 5px;
	}

	.loginbutton {
		margin: 50rpx 0px;
		color: #fff;
		background-color: #1890ff;
	}

	.main {
		padding: 10px 20px;
	}

	.bars {
		display: flex;
		justify-content: flex-end;
	}

	.scroll {
		height: 100%;
		box-sizing: border-box;
		background-color: #f8f8f8;
	}

	.scroll_top {
		font-size: 20px;
		text-align: center;
		font-weight: bold;
		border-left: #000;
		background-color: #fff;
		margin-bottom: 10px;
		padding: 8px 0;
	}

	.scroll_box {
		margin: 10px;
		padding: 10px;
		border-radius: 5px;
		background-color: #fff;
		// margin-bottom: 10px;
	}

	.scroll_box_view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.icon_right {
		display: flex;
		justify-content: flex-end;
	}

	.hr {
		border: 0.5px solid #dcdcdc;
		margin: 10px 0;
	}

	.scroll_box_logout {
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
		text-align: center; //文字水平居中
		color: #fff;
		background-color: #f00;
	}

	.top {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}

	.user {
		padding-left: 15px;
	}

	.user_flex {
		display: flex;
		gap: 15px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.nickname {
		display: flex;
		font-size: 20px;
		font-weight: bold;
		padding-bottom: 8px;
	}

	.info {
		font-size: 10px;
		padding-bottom: 8px;
		color: #686666;
	}

	.signature {
		padding: 10px;
	}

	.flex {
		display: flex;
		gap: 5px;
	}

	.followText {}

	.attention {
		display: flex;
		gap: 20px;
		padding: 10px;
	}

	.card-box {
		margin: 0; // 卡片外边距
		padding: 20px; // 卡片内边距
		overflow: hidden; // 溢出隐藏

		&:not(:last-child) {
			border-bottom: 0.1px solid #dcdcdc;
		}
	}

	.top_card {
		display: flex;
		align-items: flex-start;
	}

	.avatar_card {
		width: 38px;
		height: 38px;
		border-radius: 50%;
	}

	.card-title {
		display: inline-block;
		padding: 1rem 0px;
		font-size: 15px;
		cursor: pointer;
		transition: color 0.3s; //颜色转换时间

		&:hover {
			color: #1890ff;
		}
	}

	.footer {
		display: flex;
		font-size: 15px;
		gap: 8px 20px; //行间距
		align-items: center; //垂直居中
		justify-content: flex-end;
	}

	.praise {
		display: flex;
		align-items: center;
	}
</style>